<template>
  <div>
    <div class="blog-firstsection">
			<div class="container">
				<div class="
              col-lg-10 col-lg-offset-1
              col-md-10 col-md-offset-1
              col-sm-12
              col-xs-12
            ">
          <div>
            <a href="javascript:void(0);" :title="tag.tagName" :class="'tag' + (activeTag == index ? ' active' : '')" 
                v-for="(tag, index) in tagList" v-bind:key="index" @click="tagHandler(index, tag)">
              {{tag.tagName}}
            </a>
          </div>
          <div style="margin-top: 30px;">
            <span class="fa fa-tag list-tag">
              <span class="tag-text">{{tag.tagName}}</span>
            </span>
            <ArticleList />
          </div>
        </div>
			</div>
		</div>
  </div>
</template>

<script>
import ArticleList from '@/components/ArticleList'

export default {
  components: {
    ArticleList
  },
  data() {
    return {
      activeTag: 0,
      tag: {},
      tagList: []
    };
  },
  created() {
    this.getTags()
  },
  methods: {
    // 获取标签数据
    getTags() {
      this.tagList = [
        {id: 1, tagName: "Java"},
        {id: 2, tagName: "Vue"},
        {id: 3, tagName: "Nginx"},
        {id: 4, tagName: "Mysql"},
        {id: 5, tagName: "Redis"},
        {id: 6, tagName: "Shiro"}
      ]
      var tagId = this.$route.params.tagId
      if (tagId) {
        this.tagList.forEach((tag, index) => {
          if (tag.id === tagId) {
            this.activeTag = index
            this.tag = tag
          }
        })
      } else {
        this.activeTag = 0
        if (this.tagList[0]) {
          this.tag = this.tagList[0]
        }
      }
    },
    // 标签点击事件
    tagHandler(index, tag) {
      this.activeTag = index
      this.tag = tag
    }
  }
};
</script>

<style scoped>
.tag-text {
  font-weight: 200;
  line-height: 1.7;
  margin-left: 5px;
  letter-spacing: 1px;
}
.active {
  background-color: rgb(0, 133, 161) !important;
}
.list-tag {
  line-height: 2;
  font-size: 25px;
  color: #0085a1;
}
.list-tag::before {
  margin-right: 5px;
}
.tag:link {
  text-decoration: none;
  border-radius: 999em;
  padding: 0 14px;
  color: #fff;
  display: inline-block;
  background-color: rgb(187, 187, 238);
  font-size: 14px;
  border: none;
  line-height: 28px;
  margin: 0 8px 10px 0;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.tag:hover {
  text-decoration: none;
  border-radius: 999em;
  padding: 0 14px;
  color: #fff;
  display: inline-block;
  background-color: rgb(0, 133, 161);
  font-size: 14px;
  border: none;
  line-height: 28px;
  margin: 0 8px 10px 0;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
</style>